<template>
  <div class="head-title login">
    <van-nav-bar left-text="返回" left-arrow title="注册密码" fixed @click-left="onClickLeft" />

    <van-cell-group>
      <van-field
        v-model="loginName"
        required
        clearable
        placeholder="请输入登录名"
        @click-right-icon="$toast('用户名不可为空')"
      />

      <van-field v-model="password" :type="type" placeholder="请输入密码" required />

      <van-field v-model="userName" placeholder="请输入用户名(显示用)" required />

      <van-field v-model="realName" placeholder="请输入真实姓名" required />

      <van-field v-model="email" placeholder="请输入电子邮箱" required />

      <van-field v-model="gender" placeholder="请输入性别" required />
    </van-cell-group>

    <div class="note-footer">
      <van-button
        type="primary"
        size="small"
        color="#99CC99"
        @click="save()"
        class="AddBtn"
        :disabled="this.username === null  ||  this.password === null"
      >登录</van-button>
    </div>
  </div>
</template>

<script>
// import crypto from 'crypto'
import md5 from "js-md5";
// import { resolve4 } from 'dns';

export default {
  data() {
    return {
      loginName: null, //登录名（4~12位）
      password: null, //密码（6~12位）
      userName: null, //用户名（评论显示的名称）
      realName: null, //真实姓名s
      gender: null, //性别
      email: null, //电子邮箱
      radio: "1"
    };
  },
  //计算属性
  watch: {
    // username() {
    //   var reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
    //   if (!reg.test(this.username)) {
    //     this.errorMessage.userInput = "格式不对";
    //     // this.btnDisable = false;
    //     return false;
    //   } else {
    //     this.errorMessage.userInput = "";
    //   }
    // },
    //密码
    // password() {
    //   //  const reg = /^\d+$/
    //   if (this.password == null || this.password == "") {
    //     this.btnDisable = true;
    //     //  this.errorMessage.password = '';
    //   }
    // }
  },
  methods: {
    //md5加密
    getmd5() {
      var a;
      var md5 = crypto.createHash("md5");
      md5.update("aaa");
      var a = md5.digest("hex");
      console.log(a);
      //47bce5c74f589f4867dbd57e9ca9f808
    },
    //保存
    save() {
      // this.pwdJ =   JSON.parse(sessionStorage.getItem('pwd'));
      // var reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
      //做非空判断

      //   if (this.username == null || this.password == null) {
      //     this.$toast("输入项不可为空");
      //     return false;
      //   }

      //做特殊字符验证
      // if( !reg.test(this.username) || !reg.test(this.username) ) {
      //      this.$toast("输入项格式不对");
      //      return false;
      // }else {

      //去空格
      //   console.log(this.name);
      //   loginName:null,//登录名（4~12位）
      //   password:null,//密码（6~12位）
      //   userName:null,//用户名（评论显示的名称）
      //   realName:null,//真实姓名s
      //   gender:null,//性别
      //   email:null,//电子邮箱

      if(this.gender == '男'){
         this.gender = true;
      }else{
         this.gender = false;
      }

      this.pwdJ = {
        loginName: this.loginName, //登录名（4~12位）
        password:  md5(md5(this.password)), //密码（6~12位）
        userName: this.userName, //用户名（评论显示的名称）
        realName: this.realName, //真实姓名s
        gender: this.gender, //性别
        email: this.email //电子邮箱
      };

      console.log(this.pwdJ);

      this.$axios({
        method: "post",
        url: "/api/User/CreateAccount",
        data: this.pwdJ
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            if (res.data.code != 0) {
              this.$toast({
                duration: 800,
                message: res.data.message
              });
            }

            if (res.data.code == 0) {
              this.$toast({
                duration: 800,
                message: "注册成功"
              });
              // console.log(res.data.data);
              // sessionStorage.setItem("PWD", JSON.stringify(res.data.data));
              this.$router.push("./login");
            }
          }
        })
        .catch(err => {
          console.log(err);
          if (err.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(err.response.data);
            console.log(err.response.status);
            if (err.response.status == 500) {
              this.$toast({
                duration: 800,
                message: "登录接口请求报错，请联系管理员"
              });
            }
            // console.log(err.response.headers);
          } else if (err.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(err.request);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("Error", err.message);
          }
          console.log(err.config);
        });

      // }
    },
    //返回
    onClickLeft() {
      this.$router.push("/login");
    }
  },
  created() {
    this.$emit("header", false);
    this.$emit("footer", false);
    this.name = 0;
    this.pwdJ = JSON.parse(sessionStorage.getItem("pwd"));
    if (this.pwdJ != null) {
      this.username = this.pwdJ.username;
      this.password = this.pwdJ.pwd;
    }
    this.type = "password";
    this.rightIcon = "closed-eye";
  }
};
</script>

<style lang="less" scoped>
.AddBtn {
  width: 100%;
  margin-top: 50px;
  height: 50px;
  letter-spacing: 10px;
}
.note-icon {
  text-align: center;
  margin-bottom: 50px;
}
.pwdF {
  text-align: center;
  font-family: auto;
  font-size: 12px;
  font-weight: normal;
  margin-top: 20px;
  color: cornflowerblue;
}
.iconlogo {
  width: 50%;
}
.note-footer {
  text-align: center;
  .CreateAccount {
    margin-top: 20px;
    letter-spacing: 10px;
  }
}
.head-title {
  margin-top: 50px;
}
.loginNote {
  display: block;
  font-size: 12px;
  margin-top: 50px;
  color: #0099cc;
}
.van-field {
  height: 70px;
  font-size: 18px;
}
</style>

